<template>
  <div>
<el-card>

<!-- 車輛類型 下拉框-->

<el-form>
<el-row >
  <el-col :span="8" >
    <el-form-item label="车辆类型：">
      <el-select v-model="truckTypeId">
        <el-option
          v-for="item in optionList"
          :key="item.id"
          :label="item.name"
          :value="item.id"
        />
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="8">
<el-form-item label="车牌号码">
<el-input placeholder="请输入车牌号" v-model="licensePlate" style="width: 300px;"></el-input>
</el-form-item>
  </el-col>
  <el-col :span="6">
    <!--  按鈕-->
    <el-button style="background-color: #e15536;color: white " @click="filter">搜索</el-button>
    <el-button size="large">重置</el-button>
  </el-col>
</el-row>

</el-form>

</el-card>
    <!--tabs切換-->
    <el-card>
      <el-tabs v-model="activeName" @tab-click="handClick">
        <el-tab-pane :label="'全部'">
<!--          表单组件-->
          <tab-table :total="total" :listdata="listdata"></tab-table>
        </el-tab-pane>
        <el-tab-pane :label="'可用'" workStatus="1" >
          <tab-table :total="total" :listdata="listdata"></tab-table>
        </el-tab-pane>
        <el-tab-pane :label="'停用'" workStatus="0">
          <tab-table @getcarList="getcarList" :total="total" :listdata="listdata"></tab-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
import { getCountApi, getTruckpageApi, getTrucksApi, truckTypeApi } from '@/api/vehicle'
import TabTable from '@/views/transitqa/tab-table.vue'

export default {
  name: 'vehicle',
  components: { TabTable },
  data () {
    return {
      pages: {
        page: 1,
        pageSize: 10,
        truckTypeId: '', // 下拉框数据
        licensePlate: ''// 车牌
      },
      restaurants: [],
      activeName: '', // tabs内容，綁定設置默認
      resId: '',
      inputmodel: '',
      state: '',
      timeout: null,
      optionList: [], // 下拉框数组
      truckTypeId: '',
      licensePlate: '',
      num1: '',
      num2: '',
      num3: '',
      listdata: [],
      total: 1
    }
  },
  created () {
    this.getcarList()
    this.getgetTruckpage()
    this.getCount()
  },
  methods: {
    // 获取车辆类型信息列表
    async getcarList () {
      const res = await truckTypeApi()
      console.log(res)
      this.restaurants = res.data
      console.log(this.restaurants)
      this.optionList = res.data
      console.log(this.optionList)
    },
    // 監聽tab切換
    async handClick () {
      console.log(this.activeName)
      if (this.activeName === '1') {
        const res = await getTrucksApi({ page: 1, pageSize: 10, workStatus: this.activeName })
        console.log(res)
        this.listdata = res.data.items
        this.total = +res.data.counts
      } else if (this.activeName === '2') {
        const res = await getTrucksApi({ page: 1, pageSize: 10, workStatus: 0 })
        console.log(res)
        this.listdata = res.data.items
        this.total = +res.data.counts
      } else {
        const res = await getTrucksApi({ page: 1, pageSize: 10 })
        console.log(res)
        this.listdata = res.data.items
        this.total = +res.data.counts
      }
    },
    querySearchAsync (queryString, cb) {
      const restaurants = this.restaurants
      const results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        cb(results)
      }, 3000 * Math.random())
    },
    createStateFilter (queryString) {
      return (state) => {
        return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0)
      }
    },
    handleSelect (item) {
      console.log(item)
    },
    // 获取车辆分页效果
    async getgetTruckpage () {
      const res = await getTruckpageApi(this.pages)
      console.log(res)
    },
    // 统计车辆
    async getCount () {
      const res = await getCountApi()
      console.log(res)
    },
    // 搜索
    async filter () {
      const res = await getTruckpageApi({
        page: this.pages.page,
        pageSize: this.pages.pageSize,
        truckTypeId: this.truckTypeId,
        licensePlate: this.licensePlate
      })
      console.log(res)
      this.listdata = res.data.items
    }
  }
}
</script>
